<template>
    <div class="pop-iframe">
        <div class="videolist-box">
            <el-carousel trigger="click" height="216px" :autoplay=false>
                <el-carousel-item v-for="(item,i) in videoLists" :key="i">
                    <div class="videolistm">
                        <div v-for="(video,index) in item" class="videolistm_min" :key="index">
                            <CloudVideoPlayers :src="video.hlshd" :yunplay="'videolistm'+i+index" :coverImage="video.coverImage" :videoNname="video.name"></CloudVideoPlayers>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
  import CloudVideoPlayers from '@/components/Video/CloudVideoPlayers.vue'

  export default {
    name: 'videolistm',
    props: ['id'],
    data () {
      return {
        videoList: [],
        videoListTotal: 0,
        pageSize: 3,
        pageStart: 0,
      }
    },
    components: {
      CloudVideoPlayers
    },
    computed: {
      videoLists () {
        let result = []

        for (let i = 0; i < this.videoList.length; i += 3) {
          result.push(this.videoList.slice(i, i + 3))
        }
        console.log(result)
        return result
      }
    },
    mounted () {
      this.getUrl()
    },
    methods: {
      currentchange (v) {
        this.pageStart = v - 1
        this.getUrl()
      },
      getUrl () {
        let that = this
        return that.request
          .geturl()
          .then(function (response) {
            that.videoList = response.content
          })
          .catch(function (error) {
            that.fetchError = error
          })
      },
    }
  }
</script>

<style scoped>
    .videolistm {
        display: flex;
        width: 9rem;
        justify-content: space-around;
        margin: 0 auto;
    }
    .videolistm_min {
        width: 3rem;
    }

    .videolistm-pagination {
        width: 100%;
        margin: 0 auto;
    }
</style>
<style>
    .videolistm-pagination > .el-pager > .number, .videolistm-pagination > .btn-next, .videolistm-pagination > .btn-prev {
        border-radius: 50% !important;
    }

    .el-carousel__item h3 {
        color: #fff;
        font-size: 14px;
        line-height: 150px;
        margin: 0;
        text-align: center;
    }
</style>
